<template>
  <el-dialog title="角色信息" :visible.sync="isShow" width="800px" destroy-on-close>
      <el-form :model="itemModel" :rules="rules" ref="itemModel" label-width="120px" label-position="left">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="itemModel.name" placeholder="请输入角色名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="权限字符" prop="key">
            <el-input v-model="itemModel.key" placeholder="请输入权限字符" clearable></el-input>
          </el-form-item>
         
          <el-form-item label="菜单权限">
            <el-tree :data="routerList" show-checkbox ref="router" node-key="id" empty-text="加载中，请稍后" :props="defaultProps" default-expand-all></el-tree>
          </el-form-item>
          <el-form-item style="margin-top: 50px">
            <el-button type="primary" @click="submitForm('itemModel')">保存</el-button>
          </el-form-item>
        </el-form>
    </el-dialog>
</template>


<script>
import { createRole, updateRole, getRoleById } from "@/api/system/role.js";
import {findRouterList, findCurrentUserRouterList} from '@/api/system/router.js'
export default {
  components: {},
  data() {
    return {
        isShow: false,
        roleId: '',
        itemModel:{},
        statusList: [
          {key: 0, name: "停用"},
          {key: 1, name: "正常"},
        ],
        routerList:[],
        defaultProps: {
          children: 'children',
          label: 'title'
        },
        rules: {
            name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
            key: [{ required: true, message: '请输入权限字符', trigger: 'blur' }],
            status: [{ required: true, message: '请选择角色状态', trigger: 'blur' }],
        },
    }
  },
  created(){
    this.findRouterList()
  },
  methods:{
    show(e){
      this.isShow = true
      if(e){
        this.roleId = e
        this.getRoleInfo()
      }else{
        this.roleId = ''
        this.itemModel = {}
        this.selectLastTime = ''
      }
    },
    close(){
        this.isShow = false
    },
    // 头像上传成功
    handleAvatarUrlSuccess(e){
      this.itemModel.avatarUrl = e
    },

    //表单提交
    submitForm(formName) {
      var that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.itemModel.routers = this.getRouterAllCheckedKeys()
          if(this.roleId){
            this.updateRole("更新成功")
          }else{
            this.createRole("创建成功")
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getRoleInfo(){
      var that = this
      getRoleById({
        obj_id: this.roleId
      }).then(res => {
        if(res.data.code == 10000){
          this.itemModel = res.data.data
          this.$refs.router.setCheckedNodes(res.data.data.routerList)
        }
      });
    },
    createRole(message){
      var that = this
      createRole(this.itemModel).then(res => {
        if(res.data.code == 10000){
          this.close()
          this.$emit("confirm")
          that.$message({
            message: message,
            type: 'success'
          })
        }
      });
    },
    updateRole(message){
      var that = this
      updateRole({
        "obj_id": this.roleId,
        "name": this.itemModel.name,
        "key": this.itemModel.key,
        "routers": this.itemModel.routers
      }).then(res => {
        if(res.data.code == 10000){
          this.close()
          this.$emit("confirm")
          that.$message({
            message: message,
            type: 'success'
          })
        }
      });
    },

    /** 查询菜单树结构 */
    findRouterList() {
      findRouterList().then(res => {
        this.routerList = this.setRouter(res.data.data.list)
        // this.routerList = res.data.data.list
      })
    },
    // 所有菜单节点数据
    getRouterAllCheckedKeys() {
      // 目前被选中的菜单节点
      return [...this.$refs.router.getCheckedKeys(), ...this.$refs.router.getHalfCheckedKeys()]
    },
    // 组装路由数据
    setRouter(routerList){
      var list = []
      routerList.filter(m => {
        var children = []
        routerList.filter(n => {
          if(m.id == n.parent){
            n.meta = {
              'title': n.title,
              'icon': n.icon
            }
            children.push(n)
          }
        })
        if(children.length>0){
          m.children = children
          m.meta = {
            'title': m.title,
            'icon': m.icon
          }
          list.push(m)
        }
      })
      console.log('list', list)
      return list
    },
  },
}
</script>

<style lang="scss" scoped>

</style>
